<template>
  <div id="configdialog">
    <commonformdialog
      :dialogWidth="'30%'"
      @confirmbtn="confirmbtn"
      :isshowDialogs="isshowDailog"
      :dialogTitle="dialogtitle"
      @closetextDialog="closetextDialog"
    >
      <div class="formarea">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="small"
          label-width="100px"
        >
          <el-row>
            <el-row>
              <el-form-item label="推广规则" prop="promotion">
                <el-select
                  v-model="formData.promotion"
                  placeholder="请选择规则类型"
                  clearable
                  :style="{ width: '100%' }"
                  @change="changeoption"
                >
                  <el-option
                    v-for="(item, index) in ruleOption"
                    :key="index"
                    :label="item.title"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row></el-row>
            <el-row></el-row>
            <el-row>
              <el-form-item label="规则类型" prop="type">
                <el-input
                  v-model="formData.type"
                  placeholder="请输入规则类型"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item :label="detailtitle" prop="detail">
                <el-input
                  v-model="formData.detail"
                  placeholder="请输入规则详情"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <template slot="append">{{ appenddetail }}</template>
                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="结算规则" prop="detail">
                <el-input
                  v-model="formData.rule_detail"
                  placeholder="请输入结算规则"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                >

                </el-input>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="时间选择" prop="end_time">
                <el-date-picker v-model="formData.end_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
      :style="{width: '100%'}" placeholder="请选择日期选择日期选择" clearable></el-date-picker>
              </el-form-item>
            </el-row>
          </el-row>
        </el-form>
      </div>
    </commonformdialog>
  </div>
</template>

<script>
//引入公共弹窗
import commonformdialog from '@/components/commondialog/commondialog'
//api
import { getruleOption,operaterule } from '@/api/platform'
export default {
  data() {
    return {
        // 规则ID
        rule_id:'',
        //选中的关联ID
        id:'',
      detailtitle: '规则金额',
      //后缀显示符号
      appenddetail: '%',
      //弹窗的标题
      dialogtitle: '配置信息',
      //规则选项
      ruleOption: [],
      //表单信息
      formData: {
        promotion: '',
        end_time: '',
        type: '',
        detail: '',
        rule_detail:''
      },
      rules: {
        detail: [
          {
            required: true,
            message: '请输入规则金额',
            trigger: 'blur',
          },
        ],
        promotion: [
          {
            required: true,
            message: '请选择规则类型',
            trigger: 'change',
          },
        ],
        type: [
          {
            required: true,
            message: '请输入规则详情',
            trigger: 'blur',
          },
        ],
        end_time: [
          {
            required: true,
            message: '请选择结算规则',
            trigger: 'change',
          },
        ],
      },
    }
  },
  components: {
    commonformdialog,
  },
  props: {
    //是否显示弹窗
    isshowDailog: {
      type: Boolean,
      default: false,
    },
    // 关联ID
    ids:{
        type:Number,
        default:0
    }
  },
  methods: {
    changeoption(val) {
      this.rule_id = val
      let result = this.ruleOption.filter((item, index) => {
        if (item.id == val) {
          return item
        }
      })
      let data = result[0]
      this.formData.detail = data.detail.value
      this.formData.type = data.type.title
      this.formData.rule_detail = data.rule.title
      if(data.type.value===2){
          this.appenddetail = '元'
      }else{
          this.appenddetail = '%'
      }
    },
    //确定提交
    async confirmbtn() {
        this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        // TODO 提交表单
        let params = {
        id:this.id,
        rule_id:this.rule_id,
        end_time:this.formData.end_time
    }
     let data  = await operaterule(params)
     if(data.code=='0000'){
         this.$message.success('配置成功！')
          this.$emit('confirmbtn')
          this.$refs['elForm'].resetFields()
     }
      })



    },
    //关闭弹窗
    closetextDialog() {
      this.$emit('closetextDialog')
      this.$refs['elForm'].resetFields()
    },
    //获取选项数据
    async getruleOptions() {
      let data = await getruleOption()
      this.ruleOption = data.data
    },
  },
  mounted() {
    //获取选项数据
    this.getruleOptions()
  },
  watch:{
      isshowDailog(val){
          if(val){
              this.getruleOptions()
          }

      },
      ids(val){
        this.id = val
      }
  }
}
</script>

<style scoped lang='scss'>
::v-deep {
    .formarea .el-input-group__append{
        color: #999;
    }
  .el-input-group__append {
    padding: 0 10px;
  }
  .ruleradio {
    .el-radio {
      display: block;
      display: flex;
      align-items: center;
      margin: 20px 0;
      .el-input {
        margin: 0 5px;
      }
      .el-input__inner {
        padding: 0 5px;
      }
      &:last-child {
        margin-bottom: 0;
      }
      &:first-child {
        margin-top: 8px;
      }
    }
  }
}
.radioinput {
  display: flex;
  align-items: center;
}
</style>
